<template>
    <div class="product-details">
        <header>
            <van-icon class="back" size="32" name="arrow-left" color="#ccc" @click="back" />
            <van-tabs v-model="active" class="tabs" color="#1ba784">
                <van-tab title="商品"></van-tab>
            </van-tabs>
        </header>
        <main>
            <div class="loading" v-if="!dataObj">
                <van-loading type="spinner" />
            </div>
            <div v-else>
                <van-swipe class="my-swipe" :show-indicators="false" :loop="false">
                    <van-swipe-item v-for="(i, index) in showImg" :key="index"><img :src="i" alt="" /></van-swipe-item>
                </van-swipe>
                <div class="details">
                    <div class="price">
                        <p>{{ messageObj.priceRange }}</p>
                        <span>销量{{ dataObj.rateInfo.sales }}</span>
                    </div>
                    <div class="title van-multi-ellipsis--l2">
                        {{ messageObj.title }}
                    </div>
                </div>
                <div class="specs">
                    <div class="cell" @click="showPopup"><span>选择</span> 规格</div>
                    <van-popup v-model="show" position="bottom" :style="{ height: '70vh' }">
                        <div class="title">
                            <div>
                                <p>{{ select }}</p>
                                <p ref="price">￥{{ (selectP * num).toFixed(2) }}</p>
                            </div>
                            <van-stepper v-model="num" min="0" :disabled="!selectId" />
                        </div>
                        <van-grid :border="false" :column-num="3">
                            <van-grid-item v-for="i in messageObj.skus" :key="i.stockId" :class="i.stockId == selectId ? 'gl' : ''" @click="isSelect(i.stockId, i.style, i.size, i.price, i.img)">
                                <van-image :src="i.img" />
                                <p class="van-ellipsis">{{ i.style }} {{ i.size }}</p>
                            </van-grid-item>
                        </van-grid>
                        <van-goods-action>
                            <van-goods-action-button color="#fde6e7" type="warning" text="加入购物车" @click="shoppingcart" />
                            <van-goods-action-button color="#fe4568" type="danger" text="立即购买" @click="goPay" />
                        </van-goods-action>
                    </van-popup>
                    <div class="cell"><span>发货</span> 免邮费</div>
                    <div class="cell"><span>服务</span> 七天无理由退货 <span>|</span> 延误必陪 <span>|</span> 退货补运费</div>
                </div>
                <ul>
                    <li v-for="(i, index) in detailsImg" :key="index">
                        <img :src="i" alt="" />
                    </li>
                </ul>
            </div>
        </main>
        <footer>
            <van-goods-action>
                <van-goods-action-icon to="/shoppingcart" icon="cart-o" text="购物车" />
                <van-goods-action-button color="#fde6e7" type="warning" text="加入购物车" @click="show = true" />
                <van-goods-action-button color="#fe4568" type="danger" text="立即购买" @click="show = true" />
            </van-goods-action>
        </footer>
    </div>
</template>

<script>
import { getProductDetails } from "@/api/api";
export default {
    props: ["account"],
    data() {
        return {
            id: "",
            active: 0,
            show: false,
            dataObj: "",
            showImg: [],
            messageObj: {},
            detailsImg: [],
            select: "未选择",
            selectP: 0,
            selectId: 0,
            num: 0,
            src: "",
        };
    },
    methods: {
        getDataApi() {
            return this.axios(getProductDetails(this.id)).then(({ data }) => {
                this.dataObj = data.data.result;
                this.showImg = this.dataObj.topImages;
                this.messageObj = this.dataObj.skuInfo;
                this.detailsImg = this.dataObj.detailInfo.detailImage[0].list;
            });
        },
        back() {
            this.$router.go(-1);
        },
        // toSearch() {
        //     this.$router.push({name:'search',})
        // },
        showPopup() {
            this.show = true;
        },
        isSelect(id, sty, size, p, src) {
            if (this.selectId != id) {
                this.src = src;
                this.selectId = id;
                if (!sty) {
                    sty = "";
                }
                if (!size) {
                    size = "";
                }
                this.select = sty + size;
                this.selectP = Number(p) * 0.01;
                this.num = 1;
            }
        },
        shoppingcart() {
            let price = this.$refs.price.innerText.substr(1);
            if (price == 0.0) {
                this.$toast.fail("请选规格");
                return;
            }
            let obj = {
                id: this.id,
                src: this.src,
                name: this.messageObj.title,
                select: this.select,
                price: this.selectP,
                num: this.num,
                checked: false,
            };
            this.axios
                .post("http://127.0.0.1/addshoppingcart", {
                    data: {
                        account: this.account,
                        obj,
                    },
                })
                .then(({ data }) => {
                    console.log(data);
                    this.$toast.success("已加入购物车");
                    this.show = false;
                });
        },
        goPay() {
            let price = this.$refs.price.innerText.substr(1);
            if (price == 0.0) {
                this.$toast.fail("请选规格");
                return;
            }
            this.$router.push({ name: "pay", params: { price: price * 100, type: 0 } });
        },
    },
    mounted() {
        this.id = this.$route.params.id;
    },
    beforeRouteEnter(to, from, next) {
        next(async (vm) => {
            vm.id = vm.$route.params.id;
            // console.log(vm.id);
            vm.dataObj = "";
            await vm.getDataApi();
            vm.select = "未选择";
            vm.selectP = 0;
        });
    },
};
</script>

<style lang="scss" scoped>
.product-details {
    background-color: #fafafa;
}
header {
    .back {
        position: fixed;
        top: 0.3125rem;
        width: 2.5rem;
        height: 2.5rem;
        text-align: center;
        line-height: 2.5rem;
        border-radius: 50%;
        z-index: 999;
    }
}
main {
    margin-bottom: 50px;
    .loading {
        position: fixed;
        left: 50vw;
        top: 50vh;
        transform: translate(-50%, -50%);
    }
    .my-swipe {
        margin-top: 2vh;
        img {
            width: 100%;
            height: 50vh;
        }
    }
    .details {
        margin-top: 2vh;
        background-color: #fff;
        padding: 1vh 5vw;
        .price {
            display: flex;
            justify-content: space-between;
            align-items: center;
            p {
                font-size: 30px;
                font-weight: 600;
            }
            span {
                display: block;
            }
        }
        .title {
            margin-top: 2vh;
            font-size: 1.5rem;
        }
    }
    .specs {
        margin-top: 2vh;
        background-color: #fff;
        padding: 1vh 5vw;
        .cell {
            display: block;
            height: 2.8125rem;
            line-height: 2.8125rem;
            border-bottom: 1px solid rgba($color: #ccc, $alpha: 0.2);
            span {
                color: #ccc;
            }
        }
    }
    ul {
        margin-top: 2vh;
        background-color: #fff;
        li {
            img {
                width: 100vw;
            }
        }
    }
    .van-popup {
        padding: 1vh 5vw;
        box-sizing: border-box;
        .title {
            display: flex;
            justify-content: space-between;
            position: fixed;
            width: 100vw;
            padding: 1vh 5vw;
            box-sizing: border-box;
            top: 30vh;
            left: 0;
            background-color: #fff;
            z-index: 999;
            padding-left: 1.125rem;
            font-size: 1.125rem;
            font-weight: 600;
        }
        .van-grid {
            padding: 50px 0;
            .van-grid-item {
                border: 1px solid transparent;
                .van-image {
                    margin-bottom: 0.3125rem;
                }
                p {
                    width: 100%;
                }
            }
        }
        .van-grid-item.gl {
            border: 1px red solid;
        }
    }
}
</style>
